﻿@model KMF.WebUI.Models.CustomerRegisterModel
@{
    ViewBag.Title = "Register";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="about">
    <div class="about_title">
        <span>Đăng nhập</span>
    </div>
    <div class="register">
        <div class="register_title">
            <span>Đăng ký
            </span>
        </div>
        @using (Html.BeginForm("Register", "Login", FormMethod.Post))
        {
            <div class="register_content">
                <input type="hidden" name="dayOfMonth" id="dayOfMonth" value="@Model.Day"/>
                @Html.HiddenFor(m => m.ProvinceName)
                @Html.HiddenFor(m => m.DistrictName)
                <div class="right_col">
                    @Html.TextBoxFor(m => m.Email, new { @placeholder = "E-mail" })
                    @Html.ValidationMessageFor(m => m.Email)
                    @Html.PasswordFor(m => m.Password, new { @placeholder = "Mật khẩu" })
                    @Html.ValidationMessageFor(m => m.Password)
                    @Html.PasswordFor(m => m.ConfirmPassword, new {@placeholder = "Nhập lại mật khẩu" })
                    @Html.ValidationMessageFor(m => m.ConfirmPassword)
                    @Html.TextBoxFor(m => m.FullName, new { @placeholder = "Họ và Tên" })
                    @Html.ValidationMessageFor(m => m.FullName)
                    @Html.TextBoxFor(m => m.MobilePhone, new { @placeholder = "Số điện thoại di động" })
                    @Html.ValidationMessageFor(m => m.MobilePhone)
                    @Html.TextBoxFor(m => m.Telephone, new { @placeholder = "Số điện thoại bàn" })
                    @Html.TextBoxFor(m => m.Address, new { @placeholder = "Địa chỉ" })
                    @Html.ValidationMessageFor(m => m.Address)
                </div>
                <div class="left_col">
                    @Html.DropDownListFor(m => m.ProvinceId, new SelectList(Model.ProvinceList, "ProvinceId", "ProvinceName"), new { })
                    @Html.DropDownListFor(m => m.DistrictId, new SelectList(Model.DistrictList, "DistrictId", "DistrictName"), new { })
                    @Html.DropDownListFor(m => m.Year, new SelectList(Model.YearList, "YearVal", "Year"), new { @Class = "select_time" })
                    @Html.DropDownListFor(m => m.Month, new SelectList(Model.MonthList, "MonthVal", "Month"), new { @Class = "select_time" })
                    @Html.DropDownListFor(m => m.Day, new SelectList(Model.DayList, "DayVal", "Day"), new { @Class = "select_time" })

                    <div class="checkGen">
                        <p>
                            @Html.CheckBoxFor(m => m.Male) <span>Nam</span>
                        </p>
                        <p>
                            @Html.CheckBoxFor(m => m.Female)<span>Nữ</span>
                        </p>
                    </div>
                    <div class="registerbtn">
                        <input type="submit" class="register_button" />
                    </div>
                </div>

            </div>
        }
    </div>
</div>
@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        (function ($) {
            //check for IE7 or lower
            if (document.all && !document.querySelector && $.fn.validate) {
                var
                    origValidateFn = $.fn.validate,
                    slice = Array.prototype.slice;
                $.fn.validate = function () {
                    var
                        args = slice.call(arguments, 0),
                        origAttrFn = this.attr;
                    this.attr = function () {
                        var args = slice.call(arguments, 0);

                        //do not set the novalidate attribute in IE7 or lower, since it throws an error
                        if (args.length > 1 && args[0] === "novalidate") {
                            return this;
                        }
                        return origAttrFn.apply(this, args);
                    };
                    return origValidateFn.apply(this, args);
                };
            }
        }(window.jQuery));
    </script>
    <script>
        $('#ProvinceId').change(function () {
            var id = $(this).val();
            $('#ProvinceName').val($('#ProvinceId option:selected').text());
            $.ajax({
                url: '/Login/GetDistrict',
                data: { provinceId: id },
                success: function (data) {
                    if (data.length <= 0) {
                        $('#DistrictId').html('').append('<option value="">Quận huyện</option>');
                    }
                    else {
                        $('#DistrictId').html('').append('<option value="">Quận huyện</option>');
                        for (var i = 0; i < data.length; i++) {
                            $('#DistrictId').append('<option value="' + data[i]['DistrictId'] + '">' + data[i]['DistrictName'] + '</option>');
                        }
                        $('#DistrictName').val('');
                    }
                },
                error: function () {
                    alert('Đã có lỗi xảy ra, bạn nên kiểm tra hệ thống mạng!');
                }
            });
        });

        $('#DistrictId').change(function () {
            $('#DistrictName').val($('#DistrictId option:selected').text());
        });

        $('#Year').change(function () {
            var year = $(this).val();
            var month = $('#Month').val();
            if (year != '' && year != null && month != '' && month != null) {
                bindDay($('#Day'), year, month);
            }
        });

        $('#Month').change(function () {
            var year = $('#Year').val();
            var month = $(this).val();
            if (year != '' && year != null && month != '' && month != null) {
                bindDay($('#Day'), year, month);
            }
        });

        $("#Male").change(function () {
            if ($(this).attr('checked') == 'checked') {
                $("#Female").attr('checked', false);
            } else {
                $("#Female").attr('checked', true);
            }
        });

        $("#Female").change(function () {
            if ($(this).attr('checked') == 'checked') {
                $("#Male").attr('checked', false);
            } else {
                $("#Male").attr('checked', true);
            }
        });

        checkErrorSummary();

        bindDayListOnPageLoad();

        function bindDay(obj, year, month) {
            var dayOfMonth = getNumberOfDays(year, month - 1);
            obj.html('').append('<option value="">Ngày</option>');;
            for (var i = 1; i <= dayOfMonth; i++) {
                obj.append('<option value="' + i + '">' + i + '</option>');
            }
        }

        function bindDayListOnPageLoad() {
            var year = $('#Year').val();
            var month = $('#Month').val();
            var idSelected = $('#dayOfMonth').val();
            if (year != '' && year != null && month != '' && month != null) {
                bindDay($('#Day'), year, month);
                $('#Day option[value="' + idSelected + '"]').attr('selected', 'selected');
            }
        }


        function checkErrorSummary() {
            var text = $('#error-summary').text();
            if (text != '' && text != null) {
                $('#error-summary').fadeIn();
            }
        }
    </script>
}